<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>视频展示</title>
  <link rel="stylesheet" href="style.css">
  <style type="text/css">
  /*margin--用于任何定义的边框之外，为元素创建空间
  padding---内边距,box-sizing--排列创建浮动框*/
      * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background: #000;
    }
   /*height、weight设计元素内外边距的高度和宽度*/
    .container {
      position: relative;
      width: 100%;
      height: 100vh;
    }
    /*transform-style--规定被嵌套元素如何在3D中显示*/
    .container .box {
      position:  absolute;
      top: calc(50% - 200px);
      left: calc(50% - 200px);
      width: 400px;
      height: 400px;
      transform-style: preserve-3d; /* 表示所有子元素在3D空间呈现 */
      /* 旋转正方体在空间中的位置及投影，前两个参数控制投影，第三个参数控制空间位置 */
      transform: rotateX(-18deg) rotateY(17deg) translate3d(12px, -34px, -86px); 
    }
    .container .box > div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
    }
    /*border:1px solid(定义实线的轮廓)，rgba定义颜色，后面为透明度*/
    .container .box > div span{
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      border: 1px solid rgba(0, 0, 0, 1);
      background: #ccc;
    }
    /*object-fit---调整图片或video标签大小适应的容器*/
    .container .box > div span video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: blur(0);/*模糊*/
    }
    .container video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: blur(10px);
    }
    /*第一个span标签*/
    .container .box > div span:nth-child(1) {
      transform: rotateX(0deg) translate3d(0, 0, 200px);
    }
    .container .box > div span:nth-child(2) {
      transform: rotateX(-90deg) translate3d(0, 0, -200px);
    }
    .container .box > div span:nth-child(2) video {
      transform: rotateX(180deg);
    }
    .container .box > div span:nth-child(3) {
      transform: rotateY(-90deg) translate3d(0, 0, 200px);
    }
    </style>
</head>
<body>
  <div class="container">
    <video src="../static/合成视频.mp4" controls="controls" autoplay="" loop="" ></video>
    <div class="box">
      <div>
        <span><video src="../static/合成视频.mp4" autoplay="" muted="" loop=""></video></span>
        <span><video src="../static/合成视频.mp4" autoplay="" muted="" loop=""></video></span>
        <span><video src="../static/合成视频.mp4" autoplay="" muted="" loop=""></video></span>
      </div>
    </div>
  </div>
</body>
</html>